<template>
  <AppPage :show-footer="showFooter" class="margin-lr-sm">
    <div style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;overflow-y: hidden">
      <header v-if="showHeader" style="display: flex;align-items: center;justify-content: space-between">
        <slot v-if="$slots.header" name="header"/>
        <template v-else>
          <h2>{{ title || route.meta?.title }}</h2>
          <div style="display: flex;align-items: center;">
            <slot name="action"/>
          </div>
        </template>
      </header>
      <section style="display: flex;flex: 1;overflow-y: hidden">
        <slot/>
      </section>
    </div>
  </AppPage>
</template>

<script setup lang="ts">

import AppPage from "@/components/page/AppPage.vue";
import {useRoute} from "vue-router";

defineProps({
  showFooter: {
    type: Boolean,
    default: false,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: undefined,
  },
})
const route = useRoute()
</script>

<style scoped>

</style>
